<template>
	<div class="bottom-bar">
		<div class="check-content">
			<checkButton  class="check-button" :is-check="isSelectAll" @click.native="checkClick"></checkButton>
			<span>全选择</span>
		</div>
		<div>
			合计:{{totalPrice}}
		</div>
		<div class="calculate">
			去计算:{{checkLength}}
		</div>
	</div>
</template>

<script>
	import checkButton from '../../../components/checkButton/CheckBotton.vue'
	export default{
		components:{
			checkButton
		},
		methods:{
			checkClick(){
				if(this.isSelectAll){
					this.$store.state.cartList.forEach(item=>item.checked=false)
				}else{
					this.$store.state.cartList.forEach(item=>{item.checked=true})
				}
			}
		},
		computed:{
			totalPrice(){
				return '￥'+this.$store.state.cartList.filter(item=>{
					return item.checked
				}).reduce((prevalue,item)=>{
					return prevalue+item.price*item.count
				},0)
			},
			checkLength(){
				return this.$store.state.cartList.filter(item=>{
					return item.checked
				}).length
			},
			isSelectAll(){
				// return !(this.$store.state.cartList.filter(item=> !item.checked).length)
				if(this.$store.state.cartList.length === 0) return false
					return !this.$store.state.cartList.find(item=> !item.checked)
			}
		}
	}
</script>

<style>
	.bottom-bar{
		height: 40px;
		background-color: #eee;
		position: relative;
		line-height: 40px;
		display: flex;
	}
	.check-content{
		display: flex;
		align-items: center;
		margin-left: 10px;
		margin-right: 20px;
	}
	.check-button{
		width: 20px;
		height: 20px;
		line-height: 20px;
		margin-right: 10px;
	}
	.calculate{
		margin-left: auto;
		width: 90px;
		background-color: red;
		color: #fff;
		text-align: center;
	}
</style>
